"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import {
  ArrowLeft,
  Play,
  Clock,
  Users,
  Star,
  BookOpen,
  CheckCircle,
  Lock,
  Award,
  Download,
  DollarSign,
} from "lucide-react"

export default function FundingSkillsCoursePage() {
  const router = useRouter()
  const [enrolledLessons, setEnrolledLessons] = useState([1])

  const courseInfo = {
    title: "融资实战技巧",
    subtitle: "如何获得投资人青睐",
    description: "深入讲解融资全流程，从BP制作到路演技巧，帮助创业者成功获得融资。",
    instructor: "李投资专家",
    rating: 4.9,
    students: 856,
    duration: "12小时",
    lessons: 15,
    level: "中级",
    price: "¥299",
    tags: ["融资技巧", "商业计划书", "路演技巧", "投资人关系"],
  }

  const lessons = [
    {
      id: 1,
      title: "融资基础与时机选择",
      duration: "50分钟",
      description: "了解融资的基本概念和最佳时机",
      completed: true,
      locked: false,
    },
    {
      id: 2,
      title: "商业计划书撰写",
      duration: "75分钟",
      description: "学会制作打动投资人的BP",
      completed: false,
      locked: true,
    },
    {
      id: 3,
      title: "财务模型构建",
      duration: "60分钟",
      description: "建立专业的财务预测模型",
      completed: false,
      locked: true,
    },
    {
      id: 4,
      title: "投资人类型与匹配",
      duration: "45分钟",
      description: "了解不同类型投资人的偏好",
      completed: false,
      locked: true,
    },
    {
      id: 5,
      title: "路演技巧与演讲",
      duration: "55分钟",
      description: "掌握路演的核心技巧",
      completed: false,
      locked: true,
    },
  ]

  const completedLessons = lessons.filter((lesson) => lesson.completed).length
  const progress = (completedLessons / lessons.length) * 100

  const handleLessonClick = (lesson) => {
    if (!lesson.locked) {
      console.log("开始学习:", lesson.title)
    }
  }

  const handleEnroll = () => {
    console.log("报名课程")
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-purple-50/30">
      {/* 顶部导航 */}
      <header className="bg-white/80 backdrop-blur-xl border-b border-slate-200/50 sticky top-0 z-50">
        <div className="max-w-7xl mx-auto px-6 py-4">
          <div className="flex items-center space-x-4">
            <Button variant="ghost" size="sm" onClick={() => router.back()}>
              <ArrowLeft className="w-4 h-4 mr-2" />
              返回
            </Button>
            <div className="flex items-center space-x-2">
              <DollarSign className="w-6 h-6 text-green-600" />
              <h1 className="text-xl font-bold text-slate-900">融资课程</h1>
            </div>
          </div>
        </div>
      </header>

      <main className="max-w-7xl mx-auto px-6 py-8">
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* 主要内容 */}
          <div className="lg:col-span-2 space-y-6">
            {/* 课程介绍 */}
            <Card>
              <CardContent className="p-8">
                <div className="mb-6">
                  <h1 className="text-3xl font-bold text-slate-900 mb-2">{courseInfo.title}</h1>
                  <p className="text-xl text-slate-600 mb-4">{courseInfo.subtitle}</p>
                  <p className="text-slate-700 mb-6">{courseInfo.description}</p>

                  <div className="flex flex-wrap gap-2 mb-6">
                    {courseInfo.tags.map((tag, index) => (
                      <Badge key={index} variant="outline">
                        {tag}
                      </Badge>
                    ))}
                  </div>

                  <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
                    <div className="text-center">
                      <div className="flex items-center justify-center space-x-1 mb-1">
                        <Star className="w-4 h-4 text-yellow-500" />
                        <span className="font-semibold">{courseInfo.rating}</span>
                      </div>
                      <div className="text-sm text-slate-600">评分</div>
                    </div>
                    <div className="text-center">
                      <div className="flex items-center justify-center space-x-1 mb-1">
                        <Users className="w-4 h-4 text-blue-500" />
                        <span className="font-semibold">{courseInfo.students}</span>
                      </div>
                      <div className="text-sm text-slate-600">学员</div>
                    </div>
                    <div className="text-center">
                      <div className="flex items-center justify-center space-x-1 mb-1">
                        <Clock className="w-4 h-4 text-green-500" />
                        <span className="font-semibold">{courseInfo.duration}</span>
                      </div>
                      <div className="text-sm text-slate-600">时长</div>
                    </div>
                    <div className="text-center">
                      <div className="flex items-center justify-center space-x-1 mb-1">
                        <BookOpen className="w-4 h-4 text-purple-500" />
                        <span className="font-semibold">{courseInfo.lessons}</span>
                      </div>
                      <div className="text-sm text-slate-600">课时</div>
                    </div>
                  </div>

                  <div className="flex items-center justify-between">
                    <div className="flex items-center space-x-4">
                      <img
                        src="/placeholder.svg?height=48&width=48"
                        alt={courseInfo.instructor}
                        className="w-12 h-12 rounded-full"
                      />
                      <div>
                        <div className="font-medium text-slate-900">{courseInfo.instructor}</div>
                        <div className="text-sm text-slate-600">资深投资专家</div>
                      </div>
                    </div>
                    <div className="text-right">
                      <div className="text-2xl font-bold text-green-600">{courseInfo.price}</div>
                      <Badge className="bg-orange-100 text-orange-700">{courseInfo.level}</Badge>
                    </div>
                  </div>
                </div>

                <Button size="lg" className="w-full" onClick={handleEnroll}>
                  <Play className="w-5 h-5 mr-2" />
                  立即购买
                </Button>
              </CardContent>
            </Card>

            {/* 课程大纲 */}
            <Card>
              <CardHeader>
                <CardTitle>课程大纲</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {lessons.map((lesson, index) => (
                    <div
                      key={lesson.id}
                      className={`p-4 rounded-lg border transition-colors ${
                        lesson.locked
                          ? "bg-slate-50 border-slate-200"
                          : "bg-white border-slate-200 hover:border-blue-300 cursor-pointer"
                      }`}
                      onClick={() => handleLessonClick(lesson)}
                    >
                      <div className="flex items-center justify-between">
                        <div className="flex items-center space-x-4">
                          <div className="flex items-center justify-center w-8 h-8 rounded-full bg-slate-100">
                            {lesson.completed ? (
                              <CheckCircle className="w-5 h-5 text-green-600" />
                            ) : lesson.locked ? (
                              <Lock className="w-4 h-4 text-slate-400" />
                            ) : (
                              <span className="text-sm font-medium text-slate-600">{index + 1}</span>
                            )}
                          </div>
                          <div className="flex-1">
                            <h4 className={`font-medium ${lesson.locked ? "text-slate-400" : "text-slate-900"}`}>
                              {lesson.title}
                            </h4>
                            <p className={`text-sm ${lesson.locked ? "text-slate-400" : "text-slate-600"}`}>
                              {lesson.description}
                            </p>
                          </div>
                        </div>
                        <div className="flex items-center space-x-2">
                          <Badge variant="outline" className="text-xs">
                            <Clock className="w-3 h-3 mr-1" />
                            {lesson.duration}
                          </Badge>
                          {!lesson.locked && (
                            <Button size="sm" variant="ghost">
                              <Play className="w-4 h-4" />
                            </Button>
                          )}
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </div>

          {/* 侧边栏 */}
          <div className="space-y-6">
            {/* 学习进度 */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <Award className="w-5 h-5" />
                  <span>学习进度</span>
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div>
                    <div className="flex justify-between text-sm mb-2">
                      <span>完成进度</span>
                      <span>
                        {completedLessons}/{lessons.length}
                      </span>
                    </div>
                    <Progress value={progress} className="h-2" />
                    <div className="text-xs text-slate-500 mt-1">{Math.round(progress)}% 完成</div>
                  </div>

                  <div className="grid grid-cols-2 gap-4 pt-4 border-t">
                    <div className="text-center">
                      <div className="text-lg font-semibold text-green-600">{completedLessons}</div>
                      <div className="text-xs text-slate-600">已完成</div>
                    </div>
                    <div className="text-center">
                      <div className="text-lg font-semibold text-blue-600">{lessons.length - completedLessons}</div>
                      <div className="text-xs text-slate-600">待学习</div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>

            {/* 课程资料 */}
            <Card>
              <CardHeader>
                <CardTitle>课程资料</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-3">
                  {["融资全流程指南.pdf", "BP模板合集.zip", "财务模型模板.xlsx", "投资人联系清单.xlsx"].map(
                    (file, index) => (
                      <div key={index} className="flex items-center justify-between p-2 bg-slate-50 rounded">
                        <span className="text-sm text-slate-700">{file}</span>
                        <Button size="sm" variant="ghost">
                          <Download className="w-3 h-3" />
                        </Button>
                      </div>
                    ),
                  )}
                </div>
              </CardContent>
            </Card>

            {/* 相关课程 */}
            <Card>
              <CardHeader>
                <CardTitle>相关课程</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {[
                    {
                      title: "创业基础课程",
                      students: 1234,
                      rating: 4.8,
                    },
                    {
                      title: "团队管理艺术",
                      students: 642,
                      rating: 4.7,
                    },
                    {
                      title: "财务管理实战",
                      students: 789,
                      rating: 4.6,
                    },
                  ].map((course, index) => (
                    <div
                      key={index}
                      className="p-3 bg-slate-50 rounded-lg cursor-pointer hover:bg-slate-100 transition-colors"
                    >
                      <h4 className="font-medium text-slate-900 mb-1">{course.title}</h4>
                      <div className="flex items-center justify-between text-xs text-slate-600">
                        <div className="flex items-center space-x-1">
                          <Users className="w-3 h-3" />
                          <span>{course.students}</span>
                        </div>
                        <div className="flex items-center space-x-1">
                          <Star className="w-3 h-3 text-yellow-500" />
                          <span>{course.rating}</span>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </main>
    </div>
  )
}
